import React, {Component} from "react";
import {connect} from "react-redux";
import {actionCreator} from "./store";
import SystemMenuComponent from "./SystemMenuComponent";
import SearchTip from "../body/right/SearchTip";
import SystemListComponent from "./SystemListComponent";


/**
 * 一级分类
 * 二级分类
 *  默认 1.1 展示数据
 */
class SystemComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            mouseIndex: -1,
        };
        this.changeSecondData = this.changeSecondData.bind(this);
        this.changeShowArticle = this.changeShowArticle.bind(this);
        this.showSystemListComponent = this.showSystemListComponent.bind(this);
    }


    render() {
        return (
            //整个的布局
            <div style={projectWrapper}>
                {/*一二级分类的父容器*/}
                <div style={systemTypeRootWrapper}>
                    {/*discriminateTag true 是第一个,false 第二个*/}
                    <SystemMenuComponent
                        index={this.props.firstChoice}
                        data={this.props.systemTypeFirstData}
                        title={"一级目录"}
                        discriminateTag={true}
                        clickFirstMethod={this.changeSecondData}
                    />

                    <hr style={hrStyle}/>

                    <SystemMenuComponent
                        index={this.props.secondChoice}
                        data={this.props.systemTypeSecondData}
                        title={"二级目录"}
                        discriminateTag={false}
                        clickSecondMethod={this.changeShowArticle}
                    />

                </div>

                {/*具体内容和 热门搜索的容器*/}
                <div style={systemBottomStyle}>
                    <div style={systemLeftWrapper}>
                        {
                            this.showSystemListComponent()
                        }

                    </div>
                    <div style={systemRightWrapper}>
                        <SearchTip/>
                    </div>

                </div>
            </div>
        );
    }

    componentDidMount() {
        this.props.requestTypeData();
    }

    changeSecondData(clickIndex) {
        if (clickIndex !== this.props.firstChoice) {

            const data = this.props.systemTypeFirstData.get(clickIndex).get("children");
            this.props.clickFirstMenu(clickIndex, data);

            const cid = data.get(0).get("id");
            this.props.changeSystemCidAndPage(cid, 0);
        }
    }

    changeShowArticle(index) {
        if (index !== this.props.secondChoice) {
            this.props.clickSecondMenu(index);

            const cid = this.props.systemTypeSecondData.get(index).get("id");
            this.props.changeSystemCidAndPage(cid, 0);
        }

    }

    showSystemListComponent() {

        if (this.props.systemTypeSecondData.size > 0) {
            return (
                <SystemListComponent/>
            );
        } else {
            return null;
        }
    }


}

const mapState = (state) => {
    return {
        firstChoice: state.getIn(["systemReducer", "firstChoice"]),
        systemTypeFirstData: state.getIn(["systemReducer", "systemTypeFirstData"]),
        secondChoice: state.getIn(["systemReducer", "secondChoice"]),
        systemTypeSecondData: state.getIn(["systemReducer", "systemTypeSecondData"]),

    };
};

const dispatchState = (dispatch) => {
    return {
        requestTypeData() {
            const action = actionCreator.requestSystemTypeData();
            dispatch(action);
        }, clickFirstMenu(index, data) {
            const action = actionCreator.clickFirstMenu(index, data);
            dispatch(action);
        }, clickSecondMenu(index) {
            const action = actionCreator.clickSecondMenu(index);
            dispatch(action);
        }, changeSystemCidAndPage(cid, page) {
            const action = actionCreator.requestSystemArticleData(cid, page);
            dispatch(action);
        }
    }
};


export default connect(mapState, dispatchState)(SystemComponent);

const projectWrapper = {
    marginTop: 10,
    backgroundColor: "#f4f4f4",
};

const systemTypeRootWrapper = {
    backgroundColor: "#1F77BB",
};

const hrStyle = {
    width: 1200,
    height: 1,
    backgroundColor: "#fff",
    transform: "scaleY(0.1)",
    border: "none",
    margin: "0 auto",
    padding: 0,
};

const systemBottomStyle = {
    margin: "0 auto",
    width: 1200,
    overflow: "hidden",
};


const systemLeftWrapper = {
    width: 866,
    float: "left",
    marginTop: 30,
    boxShadow: "2px 2px 2px #ccc",
    borderRadius: 4,
};


const systemRightWrapper = {
    width: 300,
    float: "right",
};


